/*global io, windows*/

$( document ).ready(function() {
    var socket;
    $( "#btnConnect" ).bind( "click", function( event ) {
        if ($( "#btnConnect" ).val() === 'connect') {
            $( "#btnConnect" ).attr("disabled", true);
            $("#lbStatus").html('connecting');
            socket = io.connect(window.location.hostname + ":" + window.location.port, {'forceNew':true });
            socket.on('connect', function() {
                $( "#btnConnect" ).removeAttr("disabled");
                $( "#btnConnect" ).val('disconnect');
                $("#lbStatus").html('connected');
                setTimeout(function() {
                    socket.emit('message', { action: 'find_table' });
                },2000);
            });
            socket.on('message', function (data) {
                console.log(data);
                if (data.action === 'move') {
                    if (data.error === undefined) {
                        switch(data.player) {
                        case '1':
                            break;
                        case '2':
                        case 2:
                            $('#text2').val(data.card);
                            break;
                        case '3':
                        case 3:
                            $('#text3').val(data.card);
                            break;
                        case '4':
                        case 4:
                            $('#text4').val(data.card);
                            break;
                        default:
                        }
                        if (data.next === '1') {
                            $('#lbState').html('your turn');
                        } else {
                            $('#lbState').html('wait, turn of ' + data.next);
                        }
                    } else {
                        $('#lbState').html('not your turn');
                    }
                } else if (data.action === 'find_table') {
                    $("#lbStatus").html('connecting to table ' + data.table);
                } else if (data.action === 'join_table') {
                    $("#lbStatus").html('connected to table ' + data.table);
                    $('#btnSend').removeAttr('disabled');
                } else if (data.action === 'start') {
                    if (data.next === '1') {
                        $('#lbState').html('your turn');
                    } else {
                        $('#lbState').html('wait, turn of player ' + data.next);
                    }
                }
            });

            socket.on('error', function(data) {
                console.log(data);
                if (data.error !== undefined) {
                    alert(data);
                }
            });

            $( "#btnSend" ).bind( "click", function( event ) {
                // send message to server
                socket.emit('message', { action: 'move', card: $('#text1').val() });
                $('#lbState').html('wait');
            });
        } else {
            $( "#btnSend" ).unbind( "click" );
            socket.emit('message', { action: 'disconnect' });
            socket.disconnect();
            $( "#btnConnect" ).val('connect');
            $('#lbState').html(' ');
            $("#lbStatus").html('disconnected');
        }
    });
});
